import React from 'react';
import { Result } from 'antd';
import { PageContainer } from '@/component/page-container';

interface State {
  hasError: boolean;
  error: any;
}

class ErrorBoundary extends React.Component<_, State> {
  // eslint-disable-next-line
  constructor(props) {
    super(props);
    // eslint-disable-next-line react/no-unused-state
    this.state = { hasError: false, error: null };
  }

  // eslint-disable-next-line
  static getDerivedStateFromError(error: any) {
    // 更新 state，下次渲染可以展示错误相关的 UI
    return { error, hasError: true };
  }

  // eslint-disable-next-line
  componentDidCatch(error, info) {
    // 错误上报
    // eslint-disable-next-line no-console
    console.log(error, info);
  }

  // eslint-disable-next-line
  render() {
    if (this.state.hasError) {
      // eslint-disable-next-line react/no-direct-mutation-state
      this.state = { hasError: false, error: null };
      // 渲染出错时的 UI
      return (
        <PageContainer header={null}>
          <Result status="500" title="500" subTitle="抱歉，出了一些问题。" />
        </PageContainer>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundary;
